<template>
  <el-card style="margin-top:20px;">
    <template #header>
      <h3>{{ this.category }}</h3>
    </template>
    <div v-for="(info, name) in this.device" :key="name" class="item">
      <div class="item-title">{{name}}:</div>
      <p/>
      <div v-for="(state, code) in info['status']" :key="code" :class="translate[state]">
        {{formatter(code)}}
      </div>
      <el-divider></el-divider>
    </div>
  </el-card>
</template>

<script>
import axios from "axios";

export default {
  name: "Inspect_Form",
  props: [
    'category'
  ],
  data() {
    return {
      'device': Object,
      translate: {
        "在库": "in-storage",
        "借出": "lent-out",
        "遗失": "missing",
        "预定": "reserved",
      },
    }
  },
  methods: {
    formatter: function (code) {
      return code < 10 ? '0' + code : code.toString()
    },
  },
  created() {
    axios.get("/api/getByCategory", {
      params: {
        "category": this.category,
        "permission": 1,
      }
    }).then(response => {
      if(response.status !== 200){
        return
      }
      this.device = response.data
    })
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 10px;
}

.item {
  text-align: left;
}

.item-title {
  font-weight:bold;
}

.in-storage {
  color: #FFFFFF;
  border-radius: 7px;
  padding: 4px;
  display: inline-block;
  background-color: #67C23A;
  margin-top: 6px;
  margin-right: 6px;
  min-width: 20px;
  text-align: center;
}

.missing {
  color: #FFFFFF;
  border-radius: 7px;
  padding: 4px;
  display: inline-block;
  background-color: #F56C6C;
  margin-top: 6px;
  margin-right: 6px;
  min-width: 20px;
  text-align: center;
}

.lent-out {
  color: #FFFFFF;
  border-radius: 7px;
  padding: 4px;
  display: inline-block;
  background-color: #E6A23C;
  margin-top: 6px;
  margin-right: 6px;
  min-width: 20px;
  text-align: center;
}

.reserved {
  color: #FFFFFF;
  border-radius: 7px;
  padding: 4px;
  display: inline-block;
  background-color: #409eff;
  margin-top: 6px;
  margin-right: 6px;
  min-width: 20px;
  text-align: center;
}
</style>